<template>
  <div class="environment-news-container">
    <h2>近期环保新闻列表：</h2>
    <ul class="environment-news-list">
      <li v-for="item in data" :key="item.id" class="environment-news-item">
        <div class="news-item-title">
          <el-icon><StarFilled /></el-icon>
          <a :href="item.url" target="_blank">{{ item.title }}</a>
        </div>
        <!-- Optionally add more details like date or summary -->
      </li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import $ajax from '@/api/TianXing.js'
import { StarFilled } from '@element-plus/icons-vue'

const data = ref([])

onMounted(() => {
  const path = '/huanbao/index'
  $ajax
    .get(path, {
      params: {
        key: 'd9a888c90decb4dcf36d40226a57590a',
        num: 8
      }
    })
    .then((res) => {
      data.value = res.result.newslist || []
    })
})
</script>

<style scoped lang="scss">
.environment-news-container {
  color: white;
  h2 {
    font-weight: bold;
    text-align: center;
    padding-top: 15px;
    font-size: 18px;
  }
}

.environment-news-list {
  list-style-type: none;
  padding: 0;

  .environment-news-item {
    padding: 8px 0; // Vertical padding for each item
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); // Light separator, adjust opacity as needed
  }

  .news-item-title {
    margin-left: 10px;
    a {
      color: inherit; // Inherits color from parent to maintain white
      text-decoration: none;
      transition: color 0.3s ease;
      margin-left: 5px;
      &:hover {
        color: rgba(255, 255, 255, 0.8); // Lighter on hover
      }
    }
  }
}
</style>
